import React, { useState,useEffect } from 'react';
import styles from './index.less';
import { Tabs, Col, Button, Input, Row, Card, message } from 'antd';

import { useInViewport } from '@umijs/hooks';
import { getDefaultTime, updateConfig } from './service';

import Tables from './components/Tables'
const { TabPane } = Tabs;
import AuthComponent from '@/components/Authorized/AuthComponent';
// import LuggageSizeSet from './components/LuggageSizeSet/index'; //行李尺寸设置
import OverSaleSet from './components/OverSaleSet/index'; //超售补偿规则设置

export default () => {
  const [inputValue, handleInputValue] = useState('')
  const [loading, handleLoading] = useState(false)
  const [activeKey,setActiveKey] = useState('1');
  // 保存已经加载的tab-key，用于业务页面的缓存。
  const [loadedkey,setLoadedkey] = useState('1');
  // 用于重置缓存页面的tab选中状态
  const inViewPort = useInViewport(() => document.querySelector('#pageViewId'));

  const saveTime = async () => {
    if(!inputValue){
      return message.error('等待支付时间设置不允许为空！')
    }
    if (inputValue && !/^[1-9]\d*$/.test((inputValue))) {
      return message.error('只能输入正整数，请重新设置')
    } else if (inputValue > 60) {
      return message.error('不允许超过60分钟，请重新设置')
    } else {
      const hide = message.loading(`正在保存`);
      handleLoading(true)
      try {
        await updateConfig({ actConfigInfo: { content: inputValue, type: 0 } })
        getDefaultTime().then(res => {
          handleInputValue(res)
        })
        hide()
        message.success(`保存成功`);
        handleLoading(false)
      } catch (err) {
        hide();
        message.error(`保存失败请重试！`);
        handleLoading(false)
      }
    }
  }
  const tabChange = (key) => {
    setActiveKey(key)
    setLoadedkey(loadedkey+key);
    if (key === '2') {
      getDefaultTime().then(res => {
        handleInputValue(res)
      })
    }
  }

  useEffect(()=>{
    if (AuthComponent.getAuth('setting.index.refundReason')) {
      setActiveKey('1')
      setLoadedkey('1')
    } else if (AuthComponent.getAuth('setting.index.waitTime') ) {
      setActiveKey('2')
      setLoadedkey('2')
      getDefaultTime().then(res => {
        handleInputValue(res)
      })
    } else if (AuthComponent.getAuth('setting.index.oversaleRule') ) {
      setActiveKey('3')
      setLoadedkey('3')
    } else if (AuthComponent.getAuth('setting.index.luggageSize') ) {
      setActiveKey('4')
      setLoadedkey('4')
    }
  },[])

  return (
    <Card id="pageViewId">
      <Tabs defaultActiveKey={activeKey} onChange={tabChange}>
        {/* 审核拒绝原因 */}
        {
          AuthComponent.getAuth('setting.index.refundReason')
          ? <TabPane tab="审核拒绝原因" key="1">
            {loadedkey.indexOf('1') > -1 ? <Tables /> : null}
            {/* <Tables></Tables> */}
          </TabPane>
          : null
        }
        {/* 等待支付时间 */}
        {
          AuthComponent.getAuth('setting.index.waitTime')
          ?
          <TabPane tab="等待支付时间" key="2">
            {loadedkey.indexOf('2') > -1 ? <div style={{ padding: 20 }}>
              <Row style={{ marginBottom: 10 }}>代领旅客支付等待时间设置</Row>
              <Row style={{ marginBottom: 10 }}>
                <Col span={8}>
                  <Input type="text" value={inputValue} onChange={(e) => {
                    handleInputValue(e.target.value)
                  }}
                  />
                </Col>
                <Col span={4} style={{ marginLeft: 10,lineHeight: "32px" }}>分钟</Col>
              </Row>
              <Row style={{ marginBottom: 10,color: '#e29460'}}><Col span={10}>
                提示：等待期内审核人员可撤回代领旅客审核，<br />
                并重新进行审核，审核通过时间≥等待期，系统执行支付</Col>
              </Row>
              <Button type='primary' onClick={saveTime} loading={loading}>保存</Button>
            </div> : null}
            {/* <div style={{ padding: 20 }}>
              <Row style={{ marginBottom: 10 }}>代领旅客支付等待时间设置</Row>
              <Row style={{ marginBottom: 10 }}>
                <Col span={8}>
                  <Input type="text" value={inputValue} onChange={(e) => {
                    handleInputValue(e.target.value)
                  }}
                  />
                </Col>
                <Col span={4} style={{ marginLeft: 10,lineHeight: "32px" }}>分钟</Col>
              </Row>
              <Row style={{ marginBottom: 10,color: '#e29460'}}><Col span={10}>
                提示：等待期内审核人员可撤回代领旅客审核，<br />
                并重新进行审核，审核通过时间≥等待期，系统执行支付</Col>
              </Row>
              <Button type='primary' onClick={saveTime} loading={loading}>保存</Button>
            </div> */}
          </TabPane>
          :null
        }
        {/* 超售补偿规则 */}
        {
          AuthComponent.getAuth('setting.index.oversaleRule')
          ? <TabPane tab="超售补偿规则" key="3">
            {loadedkey.indexOf('3') > -1 ? <OverSaleSet /> : null}
            {/* <OverSaleSet></OverSaleSet> */}
          </TabPane>
          : null
        }
        {/* 行李箱尺寸 */}
        {/* {
          AuthComponent.getAuth('setting.index.luggageSize')
          ? <TabPane tab="行李箱尺寸" key="4">
            {loadedkey.indexOf('4') > -1 ? <LuggageSizeSet /> : null}
          </TabPane>
          : null
        } */}
      </Tabs>
    </Card>
  );
};
